<template>
	<div>
		<Header />
		<div>
			<div style="position: relative;">
				<img style="width: 100%;height: auto;" src="@/assets/images/industryNews16.jpg">
				<div style="position: absolute;bottom: 5px;left: 0;background-color: rgba(0, 0, 0, 0.2);width: 100%;">
					<div class="indexContainer mobileFontSize12"
						style="display: flex;align-items: center;font-size: 16px;color: #fff;padding: 10px 0;">
						<img style="width: 12px; height: 15px" src="@/assets/images/industryNews30.png" />
						<span style="padding-left:5px;">当前位置：</span>
						<span>首页</span>
						<span style="padding: 0 5px;">></span>
						<span>方案推广</span>
						<span style="padding: 0 5px;">></span>
						<span>{{menuIndex==0?'行业方案':menuIndex==1?'机构方案':menuIndex==2?'专家文章':'方案征集'}}</span>
					</div>
				</div>
			</div>

			<div style="display: none;" class="mobilePadding mobileBlock">
				<el-tabs v-model="menuIndex" @tab-click="tabsClick">
					<template
						v-for="item in [{name:'行业方案',value:'0'}, {name:'机构方案',value:'1'}, {name:'专家文章',value:'2'}, {name:'方案征集',value:'3'}]">
						<el-tab-pane :name="item.value" :label="item.name"></el-tab-pane>
					</template>
				</el-tabs>
				<div style="display: flex;justify-content: flex-end;">
					<img v-if="menuIndex == 3" style="width: 100px;height: 31px;cursor: pointer;"
						src="@/assets/images/industryNews22.png" @click="collect">
					<img v-if="menuIndex == 1 || menuIndex == 2" style="width: 100px;height: 31px;cursor: pointer;"
						src="@/assets/images/industryNews35.png" @click="publish">
				</div>
			</div>

			<div class="indexContainer mobilePadding"
				style="display: flex;align-items: center;justify-content: center;padding: 30px 0;">
				<div>
					<el-row>
						<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4">
							<div class="mobileNone">
								<img style="width: 202px;height: auto;" src="@/assets/images/industryNews17.png">
								<ul>
									<li v-for="(item, index) in ['行业方案', '机构方案', '专家文章', '方案征集']" :key="item"
										style="margin: 20px 0 0 8px;border-bottom: 1px dashed #ccc;padding-bottom: 20px;width: 194px;cursor: pointer;"
										@click="handleMenu(index)">
										<template v-if="menuIndex == index">
											<img style="width: 7px;height: 12px;"
												src="@/assets/images/industryNews3.png">
										</template>
										<template v-else>
											<img style="width: 7px;height: 12px;"
												src="@/assets/images/industryNews2.png">
										</template>
										<span
											:style="{ 'font-size': '18px', 'color': menuIndex == index ? '#2468f2' : '#999', 'margin-left': '10px' }">{{
								                    item }}</span>
									</li>
								</ul>
							</div>
						</el-col>
						<el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20">
							<template v-if="menuIndex == 3">
								<el-row>
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">

										<div style="position: relative;">
											<img style="width: 100%;height: auto;"
												src="@/assets/images/industryNews21.png" class="mobileNone">
											<img style="width: 138px;height: 44px;position: absolute;right: 0px;top:10px;cursor: pointer;"
												src="@/assets/images/industryNews22.png" @click="collect"
												class="mobileNone">
											
											<filterCollect @change="filterCollectChange"></filterCollect>
											
											<div style="margin:25px 60px 40px;" class="mobileMargin">
												
												
												<el-row :gutter="15" v-loading="loading"
													:style="{'margin-top':loading==true?'100px':'0px'}">
													<el-col v-for="item in listData" :key="item.id" :xs="24" :sm="24"
														:md="8" :lg="8" :xl="8" style="margin-top: 15px;">
														<div style="background-image: linear-gradient(-30deg, #e4ecf8 0%, #f1f5f9 100%);border-radius: 5px;"
															class="plan" @click="toCollectDetail(item.id)">
															<div
																style="margin: 0 15px;padding: 15px 0;border-bottom: 1px solid #cbcbcb;">
																<h4 style="font-size: 18px;color: #333333;line-height: 20px;height: 40px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;">
																	{{item.headline}}
																</h4>
																<div
																	style="font-size: 14px;line-height: 20px;color: #555555;margin-top: 8px;height: 60px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;">
																	{{item.settleMatter}}
																</div>
																<div
																	style="font-size: 14px;color: #aaaaaa;margin: 12px 0;">
																	<span>适用行业：</span>
																	<span
																		style="color: #555555;">{{item.applicableTargets}}</span>
																</div>
																<div
																	style="font-size: 14px;color: #aaaaaa;margin: 12px 0;">
																	<span>发布日期：</span>
																	<span
																		style="color: #555555;">{{item.createTime}}</span>
																</div>

																<div style="font-size: 14px;color: #aaaaaa;">有效期：
																</div>
																<div
																	style="display: flex;align-items: center;justify-content: space-between;margin-top: 5px;">
																	<div
																		style="padding: 5px 10px;background-color: #dee9ff;display: flex;align-items: center;justify-content: space-between;width: 42%;">
																		<img style="width: 14px;height: 15px;"
																			src="@/assets/images/industryNews23.png"
																			alt="">
																		<span v-if="item.collectionTimeStart"
																			style="font-size: 14px;color: #555555;">{{ item.collectionTimeStart.slice(0, 10) }}</span>
																	</div>
																	<div style="font-size: 14px;color: #444444;">-
																	</div>
																	<div
																		style="padding: 5px 10px;background-color: #dee9ff;display: flex;align-items: center;justify-content: space-between;width: 42%;">
																		<img style="width: 14px;height: 15px;"
																			src="@/assets/images/industryNews23.png"
																			alt="">
																		<span v-if="item.collectionTimeEnd"
																			style="font-size: 14px;color: #555555;">{{ item.collectionTimeEnd.slice(0, 10) }}</span>
																	</div>
																</div>

																<div
																	style="display: flex;align-items: center;justify-content: space-between;font-size: 14px;margin-top: 12px;">
																	<div style="display: flex;align-items: center;">
																		<img style="width: 16px;height: 16px;"
																			src="@/assets/images/industryNews8.png">
																		<span
																			style="color: #555;margin-left: 3px;">{{item.publisherw}}</span>
																	</div>

																	<div style="display: flex;align-items: center;">
																		<img style="width: 20px;height: 13px;"
																			src="@/assets/images/industryNews24.png">
																		<span
																			style="color: #aaa;margin-left: 3px;">{{item.pageView}}</span>
																	</div>
																</div>
															</div>
															
															<div v-if="item.isApply&&item.isApply==true" style="font-size: 16px;color: #2468f2;text-align: center;padding: 10px 0;"
																class="apply" @click.stop="apply(item.id)">
																我要投稿
															</div>
															<div v-else
																style="font-size: 16px;color: #2468f2;text-align: center;padding: 10px 0;"
																class="apply2" @click.stop="apply2()">
																我要投稿
															</div>
														</div>
													</el-col>

													<el-empty v-if="listData.length==0 && loading==false"
														description="暂无内容"></el-empty>
												</el-row>
											</div>
										</div>
									</el-col>
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
										<div style="text-align: center;margin-top: 40px;">
											<el-pagination v-if="listData.length!=0" background
												layout="prev, pager, next" :total="total" :page-size="6"
												:pager-count="5" @current-change="handleCurrentChange">
											</el-pagination>
										</div>
									</el-col>
								</el-row>
							</template>
							<template v-else>
								<el-row>
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
										<div style="position: relative;">
											<div class="mobileNone">
												<img v-if="menuIndex == 0" style="width: 100%;height: auto;"
													src="@/assets/images/industryNews18.png">
												<img v-if="menuIndex == 1" style="width: 100%;height: auto;"
													src="@/assets/images/industryNews19.png">
												<img v-if="menuIndex == 2" style="width: 100%;height: auto;"
													src="@/assets/images/industryNews20.png">
											</div>

											<img v-if="menuIndex == 1 || menuIndex == 2"
												style="width: 138px;height: 44px;position: absolute;right: 0px;top:10px;cursor: pointer;"
												src="@/assets/images/industryNews35.png" @click="publish"
												class="mobileNone">
										</div>

									</el-col>
									
									<el-col  :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
										<filters @change="filterChange"></filters>
									</el-col>
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
										<ul v-loading="loading" :style="{'margin-top':loading==true?'100px':'0px'}">
											<li v-for="(item, index) in listData" :key="item.id"
												style="margin-top: 30px;padding-bottom: 20px;margin-left:15px;border-bottom: 1px dashed #ccc;"
												@click="todetail(item.id)">
												<el-row>
													<el-col :xs="24" :sm="24" :md="5" :lg="5" :xl="5">
														<div style="display: flex;justify-content: center;">
															<div
																style="width: 246px;height: 161px;border: 1px solid #ccc;display: flex;align-items: center;justify-content: center;">
																<img style="width: 225px;height: 140px;cursor: pointer;"
																	:src="item.surfacecs">
															</div>
														</div>
													</el-col>
													<el-col :xs="24" :sm="24" :md="19" :lg="19" :xl="19">
														<div style="padding-left: 15px;">
															<el-row
																style="border-bottom: 1px solid #ccc;padding-bottom: 10px;">
																<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
																	<h2 style="color: #333;font-size: 20px;cursor: pointer;"
																		class="mobileFontSize14">
																		{{ item.schemeName }}
																	</h2>
																</el-col>
																<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
																	<div
																		style="display: flex;;flex-direction: column;align-items: end;">
																		<div style="color: #333; font-size: 15px;display: flex;align-items: center;"
																			class="mobileFontSize12">
																			<img v-if="item.surfacecs&&item.surfacecs.length" style="width: 17px; height: 17px"
																				src="@/assets/images/industryNews8.png"
																				 />
																			<img v-else style="width: 17px; height: 17px"
																				:src="item.surfacecs"
																				 />
																			<span style="margin-left: 8px;">{{item.authorfd.length > 10? item.authorfd.substring(0, 10) +"...": item.authorfd}}</span>
																		</div>
																		<div
																			style="display: flex;align-items: center;color: #999;font-size: 15px;">
																			<span
																				class="mobileFontSize12">{{ item.createTime }}</span>
																			<span style="margin: 0 8px">|</span>
																			<img style="width: 20px; height: 13px"
																				src="@/assets/images/industryNews24.png"
																				 />
																			<span
																				style="margin-left: 8px">{{item.pageView}}</span>
																		</div>
																	</div>
																	
																</el-col>
															</el-row>
															<el-row>
																<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
																	<div
																		style="margin-top: 10px;color: #333;font-size: 15px;line-height: 30px;cursor: pointer;">
																		<p>{{item.executeSolution}}</p>
																	</div>
																</el-col>
															</el-row>
														</div>
													</el-col>
												</el-row>
											</li>

											<el-empty v-if="listData.length==0 && loading==false"
												description="暂无内容"></el-empty>
										</ul>
									</el-col>
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
										<div style="text-align: center;margin-top: 40px;">
											<el-pagination v-if="listData.length!=0" background
												layout="prev, pager, next" :total="total" :page-size="5"
												@current-change="handleCurrentChange" :pager-count="5">
											</el-pagination>
										</div>
									</el-col>
								</el-row>
							</template>
						</el-col>
					</el-row>
				</div>
			</div>
		</div>

		<Footer />
		<schemeDialog ref="schemeDialog" @getNewList="contributeSuccess"></schemeDialog>
		<collectDialog ref="collectDialog" @getNewList="contributeSuccess"></collectDialog>
		<contributeDialog ref="contributeDialog" @getNewList="contributeSuccess"></contributeDialog>
	</div>
</template>
<script>
	import Header from "@/components/home/header/header";
	import Footer from "@/components/home/footer/footer";
	import schemeDialog from "@/view/personalCenter/myPlanPromotion/dialogScheme"; //方案发布
	import collectDialog from "@/view/personalCenter/myPlanPromotion/dialogCollect"; //方案征集
	import contributeDialog from "@/view/personalCenter/myPlanPromotion/dialogContribute"; //方案投稿
	import filters from "./filter.vue";
	import filterCollect from "./filterCollect.vue";
	import {
		planPromotionList,
		planCollectList,
		getKey
	} from "@/request/api/planPromotion";
	export default {
		components: {
			Header,
			Footer,
			schemeDialog,
			collectDialog,
			contributeDialog,
			filters,
			filterCollect
		},
		data() {
			return {
				menuIndex: 0,
				loading: false,
				page: 1,
				total: 0,
				listData: [],
				
				filterInfo: {}, //筛选回调
				filterCollectInfo: {}, //筛选回调
			}
		},
		created() {
			if (window.sessionStorage.getItem("userInfo") !== null) {
				this.userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
				// console.log('this.userInfo',this.userInfo)
			}
			this.getList()
		},
		methods: {
			// 筛选回调
			filterChange(e) {
				console.log('filterChange', e)
				this.filters = e
				this.getList()
			},
			filterCollectChange(e){
				this.filterCollectInfo = e
				this.getCollectList()
			},
			// 手机标签
			tabsClick(tab) {
				// console.log('tabsClick',tab);
				this.page = 1
				this.menuIndex = tab.name
				if (this.menuIndex == 3) {
					this.getCollectList()
				} else {
					this.getList()
				}
			},
			// 提示
			contributeSuccess() {
				this.$confirm("是否去个人中心查看?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					this.$router.push({
						name: "myPlanPromotion"
					});
				}).catch(() => {
					if (this.menuIndex == 3) {
						this.getCollectList()
					} else {
						this.getList()
					}
				});
			},
			// 点击分页
			handleCurrentChange(val) {
				this.page = val
				if (this.menuIndex == 3) {
					this.getCollectList()
				} else {
					this.getList()
				}
			},
			// 点击菜单
			handleMenu(index) {
				this.menuIndex = index
				this.page = 1
				if (this.menuIndex == 3) {
					this.getCollectList()
				} else {
					this.getList()
				}
			},
			// 获取列表
			getList() {
				this.listData = []
				this.loading = true
				let params = {
					checkwd:1,//syhts:this.审核状态（0待审核 1通过 2驳回 3下架 4草稿）
					schemeType: this.menuIndex,
					schemeName:this.filterInfo.schemeName,
					pageView:this.filterInfo.pageView,
					ordered:this.filterInfo.ordered,
					syhts:this.filterInfo.syhts,
					page: this.page,
					pageSize: 5
				}
				planPromotionList(params).then((res) => {
					// console.log('res',res)
					this.loading = false
					if (res.data.code == 200) {
						this.listData = res.data.result.items
						this.total = res.data.result.total
					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					this.loading = false
					console.log('err', err)
				})
			},
			// 征集列表
			getCollectList() {
				this.listData = []
				this.loading = true
				let params = {
					checkafcd: "1", // 审核状态（0待审核 1通过 2驳回）
					syhts:this.filterCollectInfo.syhts,
					datepaixv:this.filterCollectInfo.datepaixv,
					pageView:this.filterCollectInfo.pageView,
					dateTime:this.filterCollectInfo.dateTime,
					endtime:this.filterCollectInfo.endtime,
					headline:this.filterCollectInfo.headline,
					page: this.page,
					pageSize: 6
				}
				planCollectList(params).then((res) => {
					// console.log('res',res)
					this.loading = false
					if (res.data.code == 200) {
						let listData = res.data.result.items;
						this.total = res.data.result.total;

						let now = new Date().getTime()

						getKey('applicable_industry').then(res => {
							if (res.data.code === 200) {
								let list = res.data.result.items
								listData.map((item) => {

									let start = new Date(item.collectionTimeStart).getTime()
									let end = new Date(item.collectionTimeEnd).getTime()
									// console.log(start)
									// console.log(now)
									// console.log(end)
									if (start < now && now < end) {
										item.isApply = true
									}

									list.map((item2) => {
										if (item.applicableTargets && item
											.applicableTargets == item2.value) {
											item.applicableTargets = item2.label
										}
									})
								})
								this.listData = listData
							}
						})

					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					this.loading = false
					console.log('err', err)
				})
			},
			// 方案详情
			todetail(id) {
				this.$router.push({
					name: "planPromotionDetail",
					query: {
						id,
						menuIndex: this.menuIndex
					},
				});
			},
			// 征集详情
			toCollectDetail(id) {
				this.$router.push({
					name: "planCollectDetail",
					query: {
						id,
						menuIndex: this.menuIndex
					},
				});
			},
			// 我要发布
			publish() {
				if (window.sessionStorage.getItem("userInfo") === null) {
					this.$message({
						message: '请先登录',
						type: "warning",
					});
					return
				}
				if (this.userInfo.iuiCertification == 0) {
					this.$message({
						message: '请先实名认证',
						type: "warning",
					});
					return
				}
				if (this.menuIndex == 1) {
					this.$refs.schemeDialog.open('add', {
						cateId: '1',
						cateName: '机构方案'
					})
				} else {
					this.$refs.schemeDialog.open('add', {
						cateId: '2',
						cateName: '专家文章'
					})
				}
			},
			// 我要征集
			collect() {
				if (window.sessionStorage.getItem("userInfo") === null) {
					this.$message({
						message: '请先登录',
						type: "warning",
					});
					return
				}
				if (this.userInfo.iuiCertification == 0) {
					this.$message({
						message: '请先实名认证',
						type: "warning",
					});
					return
				}
				this.$refs.collectDialog.open('add', {
					cateName: '方案征集'
				})
			},
			// 我要投稿
			apply(id) {
				if (window.sessionStorage.getItem("userInfo") === null) {
					this.$message({
						message: '请先登录',
						type: "warning",
					});
					return
				}
				if (this.userInfo.iuiCertification == 0) {
					this.$message({
						message: '请先实名认证',
						type: "warning",
					});
					return
				}
				this.$refs.contributeDialog.open('add', {
					cateId: id
				})
			},
			apply2(){
				this.$message({
					message: '未开始或已过期',
					type: "warning",
				});
			}
		}
	}
</script>
<style lang="less" scoped>
	/* 适用于手机的样式 */
	@media (max-width: 767px) {
		.mobileNone {
			display: none;
		}

		.mobileBlock {
			display: block !important;
		}

		.mobileMargin {
			margin: 10px !important;
		}

		.mobilePadding {
			padding: 0 10px !important;
		}

		.mobileFontSize14 {
			font-size: 14px !important;
		}

		.mobileFontSize12 {
			font-size: 12px !important;
		}
	}

	.plan:hover {
		cursor: pointer;
		overflow: hidden;
		box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
		transform: scale(1.01, 1.01);
		transition-delay: 0.15s;

		.apply {
			transition-delay: 0.15s;
			background-color: #2468f2;
			color: #fff !important;
		}
		.apply2 {
			transition-delay: 0.15s;
			color: #999 !important;
		}
	}

	/deep/.el-pagination.is-background .btn-prev {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .el-pager li {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .btn-next {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
		background: linear-gradient(to bottom right, #266af2, #76a0f5);
	}
</style>